import React, { Component } from 'react';

import { Route, Switch, BrowserRouter } from 'react-router-dom';
import Home from './Home/Screen';
import Error from './Error';
import User from './User/Screen';
import About from './About/Screen';
import Mobx from './Mobx/Screen';
import List from './List/Screen';
import ListDetail from './List/ListDetail';
import Fetch from './Fetch/Screen';
import StateScreen from './SetState/Screen';
import Children from './Children/Screen';
import Lazy from './Lazy/Screen'
import Hoc from './Hoc/Screen'


class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={Home} />
          <Route path='/mobx' component={Mobx} />
          <Route path='/user' component={User} />
          <Route path='/about' component={About} />
          <Route path='/children' component={Children} />
          <Route path='/fetch' component={Fetch} />
          <Route path='/setstate' component={StateScreen} />
          <Route path='/lazy' component={Lazy} />
            <Route path='/hoc' component={Hoc} />
          <Route exact path='/list/:id' component={ListDetail} />
          <Route path='/list' component={List} />
          <Route path='/*' component={Error} />
        </Switch>
      </BrowserRouter>
    );
  }
}

export default App;
